  <template>
  <div>
    <SearchForm @search="getTableData" @reset="resetSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[899]">
        <el-form-item :label="$t('所属租户')">
          <el-select
              @change="tenantChange"
              style="width: 100%"
              v-model="page.adminUserId"
              clearable
          >
            <el-option
                v-for="item in tenantList"
                :key="item.adminUserId"
                :label="item.adminName"
                :value="item.adminUserId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[902]">
        <el-form-item :label="$t('投放公司')">
          <el-select
              style="width: 100%"
              v-model="page.distributorId"
              clearable
          >
            <el-option
                v-for="item in launchCompanyList"
                :key="item.id"
                :label="item.distributorName"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('渠道编号')">
          <el-input v-model="page.channelCode"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('渠道名称')">
          <el-input v-model="page.channelName"/>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card style="margin-top: 10px" shadow="never">
      <Table :table-data="tableData" :table-column="tableColumn" :loading="loading" @handleSizeChange="(val)=>{
        page.pageSize = val
        getTableData()
      }" @handleCurrentChange="(val)=>{
        page.pageNum = val
        getTableData()
      }" :page="page">
        <template slot="handle" slot-scope="{row}">
          <el-button type="text" v-show="$permiss[904]" @click="lookLinkDetails(row)">{{ $t('详情') }}</el-button>
        </template>
      </Table>
    </el-card>
    <!--    查看链接详情-->
    <Dialog :visible.sync="detailsVisible" :title="$t('详情')" width="70%" :footer="false">
      <el-row :gutter="24">
        <el-form label-width="80px">
          <el-col :span="20">
            <!--            <el-col :span="8" :xs="24">-->
            <!--              <el-form-item :label="$t('渠道编号')" prop="channelCode">-->
            <!--                <el-input v-model="detailPage.channelCode"/>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="8" :xs="24">-->
            <!--              <el-form-item :label="$t('渠道名称')" prop="channelCode">-->
            <!--                <el-input v-model="detailPage.channelName"/>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="8" :xs="24">-->
            <!--              <el-form-item :label="$t('渠道链接')" prop="channelCode">-->
            <!--                <el-input v-model="detailPage.channelLink"/>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :span="12" :xs="24">
              <el-form-item :label="$t('日期')">
                <el-date-picker
                    v-model="detailPage.timeValue"
                    style="width: 100%"
                    type="daterange"
                    range-separator="~"
                    unlink-panels
                    value-format="yyyy-MM-dd"
                    :start-placeholder="$t('开始时间')"
                    :end-placeholder="$t('结束时间')"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="4" :xs="24" style="text-align: right">
            <el-button type="primary" @click="lookLinkDetails(tableRows)">{{ $t('查询') }}</el-button>
            <el-button @click="resetDetailSearch">{{ $t('重置') }}</el-button>
          </el-col>
        </el-form>
      </el-row>
      <Table max-height="600px" :table-column="detailsTableColumn" :table-data="detailsTableData"
             :page="detailPage" @handleSizeChange="(val)=>{
        detailPage.pageSize = val
         lookLinkDetails(tableRows)
      }" @handleCurrentChange="(val)=>{
        detailPage.pageNum = val
        lookLinkDetails(tableRows)
      }"></Table>
    </Dialog>
  </div>
</template>

<script>
import {selectTenant} from "@/api/system";
import {selectCodeStatistical, selectCodeStatisticalDate, selectCompany} from '@/api/channel'
import {dateFormatSection} from "@/utils/tools";

export default {
  name: 'deliveryLinkStatistics',
  data() {
    return {
      tenantList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      tableColumn: [
        {label: this.$t('渠道编号'), prop: 'channelCode', align: 'center', minWidth: 100},
        {label: this.$t('渠道名称'), prop: 'channelName', align: 'center', minWidth: 100},
        {label: this.$t('投放公司'), prop: 'distributorName', align: 'center', minWidth: 100},
        {label: this.$t('渠道链接'), prop: 'channelLink', align: 'center', minWidth: 200},
        {label: this.$t('创建时间'), prop: 'inputTime', align: 'center', minWidth: 150},
        {label: 'PV', prop: 'pv', align: 'center', minWidth: 100},
        {label: 'UV', prop: 'uv', align: 'center', minWidth: 100},
        {label: this.$t('注册'), prop: 'registered', align: 'center', minWidth: 100},
        {label: this.$t('申请'), prop: 'loan', align: 'center', minWidth: 100},
        {label: this.$t('放款'), prop: 'payment', align: 'center', minWidth: 100},
        {label: this.$t('注册/UV'), prop: 'uvRegisteredRatio', align: 'center', minWidth: 100},
        {label: this.$t('申请/注册'), prop: 'loanRegisteredRatio', align: 'center', minWidth: 100},
        {label: this.$t('放款/UV'), prop: 'uvPaymentRatio', align: 'center', minWidth: 100},
        {label: this.$t('放款/注册'), prop: 'paymentRegisteredRatio', align: 'center', minWidth: 100},
        {label: this.$t('注册黑名单率'), prop: 'registeredBlacklistRatio', align: 'center', minWidth: 100},
        {
          label: this.$t('操作'),
          slot: 'handle',
          align: 'center',
          minWidth: 100,
          isHide: !this.$permiss[904],
          fixed: 'right'
        },
      ],
      bindLinkVisible: false,
      tableRows: {},
      launchCompanyList: [],
      detailsTableColumn: [
        {label: this.$t('日期'), prop: 'date', align: 'center', minWidth: 100},
        {label: this.$t('渠道编号'), prop: 'channelCode', align: 'center', minWidth: 100},
        {label: this.$t('渠道名称'), prop: 'channelName', align: 'center', minWidth: 100},
        // {label: this.$t('投放公司'), prop: 'distributorName', align: 'center', minWidth: 100},
        // {label: this.$t('渠道链接'), prop: 'channelLink', align: 'center', minWidth: 200},
        {label: 'PV', prop: 'pv', align: 'center', minWidth: 100},
        {label: 'UV', prop: 'uv', align: 'center', minWidth: 100},
        {label: this.$t('注册'), prop: 'registered', align: 'center', minWidth: 100},
        {label: this.$t('申请'), prop: 'loan', align: 'center', minWidth: 100},
        {label: this.$t('放款'), prop: 'payment', align: 'center', minWidth: 100},
        {label: this.$t('注册/UV'), prop: 'uvRegisteredRatio', align: 'center', minWidth: 100},
        {label: this.$t('申请/注册'), prop: 'loanRegisteredRatio', align: 'center', minWidth: 100},
        {label: this.$t('放款/UV'), prop: 'uvPaymentRatio', align: 'center', minWidth: 100},
        {label: this.$t('放款/注册'), prop: 'paymentRegisteredRatio', align: 'center', minWidth: 100},
        {label: this.$t('注册黑名单率'), prop: 'registeredBlacklistRatio', align: 'center', minWidth: 100},
      ],
      detailsTableData: [],
      detailPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      detailsVisible: false,
      loading: false
    }
  },
  mounted() {
    this.getSelect()
  },
  methods: {
    async getTableData() {
      this.loading = true
      const res = await selectCodeStatistical(this.page)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.loading = false
        this.page = {
          ...this.page,
          total
        }
      } else {
        this.loading = false
      }
    },
    // 查看详情
    async lookLinkDetails(rows) {
      const {distributorId, channelCode} = rows
      const [startTime, endTime] = dateFormatSection(this.detailPage.timeValue || [])
      const params = {
        startTime, endTime,
        distributorId, channelCode,
        ...this.detailPage
      }
      delete params.timeValue
      const res = await selectCodeStatisticalDate(params)
      if (res.code === 1) {
        const {list, pageNum, pageSize, total} = res.data
        this.detailsTableData = list
        this.detailPage = {
          ...this.detailPage,
          pageNum, pageSize, total
        }
        this.tableRows = {...rows}
        this.detailsVisible = true
      }
    },
    // 重置详情搜索条件
    resetDetailSearch() {
      this.detailPage = {
        pageNum: 1,
        pageSize: 10,
      }
      this.lookLinkDetails(this.tableRows)
    },
    resetSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    },
    // 租户下拉切换
    tenantChange() {
      if (this.page.distributorId) {
        this.$set(this.page, 'distributorId', null)
      }
      this.getLaunchCompany()
    },
    // 获取投放公司
    async getLaunchCompany() {
      const res = await selectCompany({adminUserId: this.page.adminUserId})
      if (res.code === 1) {
        this.launchCompanyList = res.data
      }
    },
    async getSelect() {
      this.tenantList = await selectTenant().then(res => res.data)
      if (this.tenantList.length === 0) {
        this.getTableData()
        this.$permiss[902] && this.getLaunchCompany()
      } else {
        this.$set(this.page, 'adminUserId', this.tenantList[0].adminUserId)
        this.getTableData()
      }
    }
  }

}
</script>

<style scoped>

</style>
